@layer components {
    pre,
    [is-~='pre'] {
        --pre-background: var(--background1);

        background-color: var(--pre-background);
        white-space: pre-wrap;
        color: var(--foreground0);
        font-family: var(--font-family);
        font-size: var(--font-size);
        font-weight: var(--font-weight-normal);
        line-height: var(--line-height);
        outline: none;
        border: none;
        padding: 1lh 1ch;

        &[size-='small'] {
            padding: 0 1ch;
        }

        &:not([size-]) {
            background-color: transparent;
            background-image: linear-gradient(
                to bottom,
                transparent,
                transparent 0.5lh,
                var(--pre-background) 0.5lh,
                var(--pre-background) calc(100% - 0.5lh),
                transparent calc(100% - 0.5lh),
                transparent
            );
        }
    }
}
